<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        body {
            background: #181818;
            min-height: 100vh;
            margin: 0;
            color: #f1f1f1;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 1rem;
        }
        .video-container {
            position: relative;
            width: 100%;
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 24px rgba(0,0,0,0.45);
        }
        .video-player {
            width: 100%;
            aspect-ratio: 16/9;
        }
        .video-info {
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: #1f1f1f;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        .video-title {
            font-size: 1.4rem;
            color: #fff;
            font-weight: 600;
            margin-bottom: 1rem;
            word-break: break-all;
        }
        .video-meta {
            color: #b0b0b0;
            font-size: 1rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .video-meta i {
            width: 20px;
            text-align: center;
        }
        .action-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .btn {
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
            border-radius: 8px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }
        .btn i {
            font-size: 1.1rem;
        }
        .btn-back {
            background: #444;
            color: #fff;
            border: none;
        }
        .btn-back:hover {
            background: #555;
            color: #fff;
            transform: translateY(-2px);
        }
        .btn-favorite {
            background: #ffb300;
            color: #000;
            border: none;
        }
        .btn-favorite:hover {
            background: #ffc107;
            color: #000;
            transform: translateY(-2px);
        }
        .btn-favorite.active {
            background: #ffd54f;
        }
        .btn-delete {
            background: #e53935;
            color: #fff;
            border: none;
        }
        .btn-delete:hover {
            background: #c62828;
            color: #fff;
            transform: translateY(-2px);
        }
        .delete-confirm {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #2d2d2d;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            z-index: 1000;
            text-align: center;
            max-width: 90%;
            width: 400px;
        }
        .delete-confirm p {
            margin-bottom: 1.5rem;
            color: #ffb300;
            font-size: 1.1rem;
        }
        .delete-confirm .btn {
            min-width: 100px;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 999;
        }
        @media (max-width: 768px) {
            .container {
                padding: 0.5rem;
                margin: 10px auto;
            }
            .video-info {
                padding: 1rem;
            }
            .video-title {
                font-size: 1.2rem;
            }
            .action-buttons {
                flex-direction: column;
            }
            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="video-container">
            <video id="videoPlayer" class="video-player" controls autoplay>
                <source src="/video/{{ record.id }}" type="video/mp4">
                您的浏览器不支持视频播放
            </video>
        </div>
        <div class="video-info">
            <div class="video-title">{{ record.original|basename }}</div>
            <div class="video-meta">
                <i class="fas fa-folder"></i>
                <span>原始路径：{{ record.original }}</span>
            </div>
            <div class="video-meta">
                <i class="fas fa-clock"></i>
                <span>视频时长：
                {% if record.duration %}
                    {% set hours = (record.duration // 3600)|int %}
                    {% set minutes = ((record.duration % 3600) // 60)|int %}
                    {% set seconds = (record.duration % 60)|int %}
                    {{ '%02d:%02d:%02d'|format(hours, minutes, seconds) }}
                {% else %}
                    --:--:--
                {% endif %}
                </span>
            </div>
        </div>
        <div class="action-buttons">
            <a href="javascript:window.history.back();" class="btn btn-back">
                <i class="fas fa-arrow-left"></i>
                返回列表
            </a>
            <button id="favoriteBtn" class="btn btn-favorite {% if record.is_favorite %}active{% endif %}" onclick="toggleFavorite({{ record.id }})">
                <i class="fas fa-star"></i>
                <span id="favoriteBtnText">{% if record.is_favorite %}已收藏{% else %}收藏{% endif %}</span>
            </button>
            <button class="btn btn-delete" onclick="showDeleteConfirm()">
                <i class="fas fa-trash"></i>
                删除视频
            </button>
        </div>
    </div>

    <div class="overlay" id="overlay"></div>
    <div id="deleteConfirm" class="delete-confirm">
        <p>确定要删除这个视频吗？此操作不可恢复。</p>
        <div>
            <button class="btn btn-danger" onclick="confirmDelete({{ record.id }})">
                <i class="fas fa-trash"></i>
                确认删除
            </button>
            <button class="btn btn-secondary ms-2" onclick="hideDeleteConfirm()">
                <i class="fas fa-times"></i>
                取消
            </button>
        </div>
    </div>

    <script>
        // 视频播放器控制
        const videoPlayer = document.getElementById('videoPlayer');
        videoPlayer.addEventListener('contextmenu', (e) => e.preventDefault());
        
        // 收藏功能
        function toggleFavorite(recordId) {
            fetch(`/favorite/${recordId}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const btn = document.getElementById('favoriteBtn');
                    const text = document.getElementById('favoriteBtnText');
                    if (data.is_favorite) {
                        btn.classList.add('active');
                        text.textContent = '已收藏';
                    } else {
                        btn.classList.remove('active');
                        text.textContent = '收藏';
                    }
                } else {
                    alert('操作失败：' + data.message);
                }
            })
            .catch(error => {
                alert('操作失败：' + error);
            });
        }

        // 删除确认
        function showDeleteConfirm() {
            document.getElementById('overlay').style.display = 'block';
            document.getElementById('deleteConfirm').style.display = 'block';
        }

        function hideDeleteConfirm() {
            document.getElementById('overlay').style.display = 'none';
            document.getElementById('deleteConfirm').style.display = 'none';
        }

        function confirmDelete(recordId) {
            // 先释放视频播放
            videoPlayer.pause();
            videoPlayer.removeAttribute('src');
            videoPlayer.load();

            fetch(`/delete/${recordId}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.href = '/';
                } else {
                    alert('删除失败：' + data.message);
                    hideDeleteConfirm();
                }
            })
            .catch(error => {
                alert('删除失败：' + error);
                hideDeleteConfirm();
            });
        }

        // 键盘快捷键
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                hideDeleteConfirm();
            }
        });
    </script>
</body>
</html> 